<template>
  <div
    class="header flex justify-content align-items"
    :style="{ background: TxtHeader.background }"
  >
    <div
      v-if="TxtHeader.leftOpt"
      @click="leftClick"
      class="left flex justify-content align-items"
      :style="{ color: TxtHeader.leftOpt.color }"
    >
      <span v-if="TxtHeader.leftOpt.text">{{ TxtHeader.leftOpt.text }}</span>
      <van-icon
        v-else
        :name="TxtHeader.leftOpt.icon ? TxtHeader.leftOpt.icon : 'arrow-left'"
      />
    </div>
    <div
      class="title flex justify-content align-items"
      :style="{ color: TxtHeader.color }"
    >
      <span>{{ TxtHeader.title }}</span>
      <slot></slot>
    </div>
    <div class="right flex justify-content align-items">
      <div
        @click="rightClick"
        v-if="TxtHeader.rightOpt"
        :style="{ color: TxtHeader.rightOpt.color }"
      >
        <span v-if="TxtHeader.rightOpt.text">{{
          TxtHeader.rightOpt.text
        }}</span>
        <van-icon
          v-else
          :name="TxtHeader.rightOpt.icon ? TxtHeader.rightOpt.icon : 'share-o'"
        />
      </div>
    </div>
  </div>
</template>
<script>
/*
TxtHeader: {
  //头部设置
  background: "#000", //头部背景颜色
  color: "#fff", //头部中间文字颜色
  title: "广慈太保互联网医院",
  leftOpt: {
    //左边按钮设置
    icon: "",
    text: "",
    color: "#fff"
  },
  rightOpt: {
    //右边按钮设置
    icon: "",
    text: "",
    color: "#fff"
  }
}
*/

export default {
  name: "HeaderTop",
  props: {
    TxtHeader: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    leftClick() {
      this.$emit("leftClick");
    },
    rightClick() {
      this.$emit("rightClick");
    }
  }
};
</script>
<style scoped>
.header {
  height: 0.5rem;
}
.header .title {
  flex: auto;
}
.header .title {
  font-size: 0.18rem;
  font-family: "PingFangSC-Semibold";
}
.header .left,
.header .right {
  height: 0.5rem;
  min-width: 0.5rem;
  max-width: 2rem;
  font-size: 0.18rem;
}
</style>
